<template>
  <div class="about">
    <div class="he">
      <div class="hehe">
        <div style="width:1495px;height: 30px;padding-top: 10px">
          <span>小米商城</span><span>MUI</span><span>云服务</span><span>协议规则</span>
        <span style="margin-left: 1100px;" @click="dl">登录</span>
        </div>
        <div style="width:100px;height: 50px;margin-left: 1500px;margin-top: -40px;;">
          <el-button style="width:100px;height: 50px;" class="el-icon-shopping-cart-2" type="warning" @click="cha">购物车</el-button>
        </div>
      </div>
    </div>
    <div class="sjj">
      <el-row>
        <p></p>
        <br />
      </el-row>
      <el-row>
        <el-col :span="4">
          <div class="sjjll" @click="hh">
            <p class="el-icon-s-home"></p>
          </div>
        </el-col>
        <el-col :span="2">
          <p>小米手机</p>
        </el-col>
        <el-col :span="2">
          <p>RedMi红米</p>
        </el-col>
        <el-col :span="2">
          <p>电视</p>
        </el-col>
        <el-col :span="4" class="sjjcha">
          <el-input placeholder="请输入内容">
            <template slot="append">
              <el-button
                type="primary"
                icon="el-icon-search"
              ></el-button>
            </template>
          </el-input>
        </el-col>
      </el-row>
    </div>
    <div class="headr">
      <p>
        <span class="z">666</span>
        <span>概述|参数|用户评价</span>
        <el-button type="warning" @click="gou(kk)"
          >立即购买</el-button
        >
      </p>
    </div>
    <div>
      <img
        src="http://localhost:20338/StaticFiles/曹真.png"
        alt=""
        width="2000px"
        height="1000px"
      />
    </div>
    <div class="biao"></div>
    <div>
      <img
        src="http://localhost:20338/StaticFiles/曹昂.png"
        alt=""
        width="2000px"
        height="1000px"
      />
    </div>
    <div>
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item v-for="items in imgdata" :key="items">
          <h3 class="medium">
            <img :src="items.img" width="300px" height="200px" />
          </h3>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgdata: [
        {
          url: "",
          img: "http://localhost:55943/StaticFiles/董和.png",
        },
        {
          url: "",
          img: "http://localhost:55943/StaticFiles/董袭.png",
        },
        {
          url: "",
          img: "http://localhost:55943/StaticFiles/董袭.png",
        },
      ],
      kk:''
    };
  },
  methods: {
    // gou(item) {
    //   this.$router.push("/gou/"+item);
    // },
    gou(item) {
      this.$router.push({path:"/gou",query:item});
    },
    
    cha() {
      this.$router.push("/car");
    },
    hh() {
      this.$router.push("/");
    },
    dl(){
      this.$router.push("/login");
    }
  },
  created() {
    // this.kk=this.$route.params.id;
    // console.log(this.kk);
    this.kk=this.$route.query;
    console.log(this.kk);
  },
};
</script>

<style scoped>
.about {
  widows: 2000px;
  height: 4000px;
}
.headr {
  widows: 2000px;
}
.z {
  margin-left: 50px;
}
.biao {
  width: 1500px;
  height: 800px;
}
.hehecar{
  width: 80px;
  height: 50px;
  background-color: orange;
  
}
.hehe {
  width: 1600px;
  background-color: black;
  margin: auto;
  color: #fff;
}
.he {
  width: 100%;
  height: 50px;
  background-color: black;
  margin: auto;
  color: #fff;
}
.sjjll {
  width: 50px;
  height: 50px;
  background-color: orange;
  
}
.sjjcha {
  margin-left: 650px;
}
.sjj {
  width: 1600px;
  margin: auto;
  height: 100px;
  background-color: #fff;
}
</style>